<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">银行卡号</text>
			<input class="input" type="number" @input="setCardNum" v-model="cardData.cardNum" maxlength="25" placeholder="请输入银行卡号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">选择银行</text>
			<picker @change="PickerChange" :value="cardData.bankName" :range="bankNameList">
				<view class="picker">
					{{cardData.bankName  ?bankNameList[cardData.bankName] : '请选择银行'}}
				</view>
			</picker>
		</view>
		<view class="row b-b">
			<text class="tit">开户支行</text>
			<input class="input" type="text" maxlength="100" v-model="cardData.bankAddress" placeholder="请输入开户支行" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">卡主姓名</text>
			<input class="input" type="text" maxlength="50" v-model="cardData.cardName" placeholder="请输入卡主姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号码</text>
			<input class="input" type="number" v-model="cardData.cardPhone" maxlength="11" placeholder="请输入银行预留手机号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b"> 
			<text class="tit">卡属性</text>
			<picker @change="PickerChange" :value="cardData.cardType" :range="cardTypeList">
				<view class="picker">
					{{cardTypeList[cardData.cardType]}}
				</view>
			</picker>
		</view>
		<button class="add-btn" @click="addOrUpdate">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankNameList:['中国银行','农业银行','工商银行','建设银行','邮政储蓄银行',"交通银行"
				,"招商银行","兴业银行","中信银行","浦发银行","广发银行","民生银行","华夏银行","平安银行"],
				cardTypeList:['储蓄卡'],//['储蓄卡','信用卡'],
				cardData: {
					cardName:'',
					cardPhone: '',
					bankAddress:'',
					bankName: '',
					cardType: '0',
					cardNum: ''
				}
			}
		},
		onLoad(option){
			
		},
		methods: {
			setCardNum(e){
				let num = e.detail.value;
				if(num.length >= 4 && num.length < 7){
					this.getNameByNumber(num);
				}
			},
			getNameByNumber(num){
				var that = this;
				if(num.indexOf('436742') == 0){
					console.log("中国建设银行VISA龙卡借记卡")
					that.cardData.bankName = '3'
					return
				}
				if(num.indexOf('436745') == 0){
					console.log("中国建设银行VISA龙卡贷记卡")
					that.cardData.bankName = '3'
					that.cardData.cardType = '1'
					return
				}
				if(num.indexOf('622280') == 0){
					console.log("中国建设银行支付宝龙卡借记卡 ")
					that.cardData.bankName = '3'
					return
				}
				if(num.indexOf('621700') == 0){
					console.log("中国建设银行支付宝龙卡借记卡 ")
					that.cardData.bankName = '3'
					return
				}
				if(num.indexOf('6227') == 0){
					console.log("中国建设银行 ")
					that.cardData.bankName = '3'
					return
				}
				if(num.indexOf('6210') == 0){
					console.log("中国建设银行 车主卡")
					that.cardData.bankName = '3'
					return
				}
				if(num.indexOf('622188') == 0){
					console.log("中国邮政储蓄绿卡借记卡")
					that.cardData.bankName = '4'
					return
				}
				if(num.indexOf('955100') == 0){
					console.log("中国邮政储蓄绿卡借记卡")
					that.cardData.bankName = '4'
					return
				}
				if(num.indexOf('622150') == 0){
					console.log("中国邮政储蓄绿卡借记卡")
					that.cardData.bankName = '4'
					return
				}
				if(num.indexOf('622760') == 0){
					console.log("中国银行中银都市卡")
					that.cardData.bankName = '0'
					return
				}
				if(num.indexOf('409666') == 0){
					console.log("中国银行BOC系列VISA标准卡普通卡/VISA高校认同卡")
					that.cardData.bankName = '0'
					return
				}
				if(num.indexOf('438088') == 0){
					console.log("中国银行国航知音信用卡")
					that.cardData.bankName = '0'
					that.cardData.cardType = '1'
					return
				}
				if(num.indexOf('622752') == 0){
					console.log("中国银行上海市分行长城人民币贷记卡普通卡")
					that.cardData.bankName = '0'
					that.cardData.cardType = '1'
					return
				}
				if(num.indexOf('427020') == 0){
					console.log("中国工商银行VISA学生国际信用卡")
					that.cardData.bankName = '2'
					that.cardData.cardType = '1'
					return
				}
				if(num.indexOf('427030') == 0){
					console.log("中国工商银行VISA国际信用卡金卡")
					that.cardData.bankName = '2'
					that.cardData.cardType = '1'
					return
				}
				if(num.indexOf('530990') == 0){
					console.log("中国工商银行MC国际信用卡普通卡")
					that.cardData.bankName = '2'
					that.cardData.cardType = '1'
					return
				}
				if(num.indexOf('622230') == 0){
					console.log("中国工商银行新版人民币贷记卡普卡")
					that.cardData.bankName = '2'
					that.cardData.cardType = '1'
					return
				}
				if(num.indexOf('622235') == 0){
					console.log("中国工商银行新版人民币贷记卡金卡")
					that.cardData.bankName = '2'
					that.cardData.cardType = '1'
					return
				}
				if(num.indexOf('622210') == 0){
					console.log("中国工商银行新版信用卡(准贷)普卡")
					that.cardData.bankName = '2'
					that.cardData.cardType = '1'
					return;
				}
				if(num.indexOf('622215') == 0){
					console.log("中国工商银行新版信用卡(准贷)金卡")
					that.cardData.bankName = '2'
					that.cardData.cardType = '1'
					return;
				}
				if(num.indexOf('622200') == 0){
					console.log("中国工商银行牡丹灵通卡借记卡")
					that.cardData.bankName = '2'
					return;
				}
				if(num.indexOf('955880') == 0){
					console.log("中国工商银行原牡丹灵通卡借记卡")
					that.cardData.bankName = '2'
					return;
				}
				if(num.indexOf('552599') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('404119') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('404121') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('519412') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('403361') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('558730') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('520083') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('520082') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('519413') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('49102') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('404120') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('404118') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('53591') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('404117') == 0){
					console.log("农业银行")
					that.cardData.bankName = '1'
					return;
				}
				if(num.indexOf('622836') == 0){
					console.log("中国农业银行人民币贷记卡 香港旅游卡贷记卡金卡")
					that.cardData.bankName = '1'
					that.cardData.cardType = '1'
					return;
				}
				if(num.indexOf('622837') == 0){
					console.log("中国农业银行人民币贷记卡 香港旅游卡贷记卡普卡")
					that.cardData.bankName = '1'
					that.cardData.cardType = '1'
					return;
				}
				if(num.indexOf('622848') == 0){
					console.log("中国农业银行世纪通宝借记卡")
					that.cardData.bankName = '1'
					return;
				}
				
			},
			PickerChange(e){
				this.cardData.bankName = e.detail.value;
				console.log(e.detail.value)
			},
			switchChange(e){
				this.cardData.defualtFlg = e.detail.value == true ? '1' : '0' ;
			},
			/* 添加或者修改地址 */
			addOrUpdate(){
				let that = this;
				let data = this.cardData;
				if(!data.cardNum){
					this.$api.msg('请输入银行卡号');
					return;
				}
				if(!data.bankName){
					this.$api.msg('请选择开户行');
					return;
				}
				if(!data.bankAddress){
					this.$api.msg('请选输入开户支行名称');
					return;
				}
				if(!/(^1[0-9][0-9]{9}$)/.test(data.cardPhone)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(!data.cardName){
					this.$api.msg('请输入卡主姓名');
					return;
				}
				that.$network.request("UserCardAction/addBankCard", data, function(res) {
					if(res.data.state){
						uni.showToast({
							icon: 'none',
							title: "添加成功" ,
							duration: 1200
						})
						setTimeout(function(){
							uni.navigateBack({})
						},1200)
					}
				}, "", function(res) {
					console.error(JSON.stringify(res))
					uni.showToast({
						icon: 'none',
						title: '加载失败',
						duration: 1200
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 140upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
